<template>
  <el-container class="new-built-container">
    <el-main class="bodys">
      <div class="content-form">
        <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px">
          <el-form-item label="增加模型" prop="file">
            <el-upload
              ref="upload"
              type="file"
              class="upload-demo"
              action
              :limit="1"
              :http-request="uploadFile"
              :file-list="fileList"
              :auto-upload="false"
              :accept="acceptFile('files')"
              :on-exceed="formHandleExceed"
              :on-change="formHandleChange"
              :on-remove="formHandleRemove"
              :before-upload="beforeUploadForm"
            >
              <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
              <!--              <div slot="tip" class="el-upload__tip">上传文件只能是{{ this.formFormat }} 格式！
                大小不能超过5G</div>-->
            </el-upload>
          </el-form-item>
          <el-form-item v-if="flag" label="主文件名:" prop="rootName">
            <el-input v-model="formData.rootName" class="input-text-max-width" placeholder="请输入主文件名" clearable @blur="changeStye" />
          </el-form-item>
          <div :style="style">
            <p><i class="el-icon-warning" style="color: #e6a700" /><strong style="color: #e6a700">提示：</strong>{{ msg }}格式：<strong>{{ exampleMsg }}</strong>例如：{{ example }}</p>
          </div>
        </el-form>
      </div>
      <div class="content-footer">
        <el-button size="mini" type="text" @click="dialogClose">取消</el-button>
        <el-button type="primary" :loading="isLoading" size="mini" @click="submitFile">确认</el-button>
      </div>
    </el-main>
  </el-container>
</template>

<script>

import { setLoading } from '../../../utils'
import { upLoadModel } from '@/api/project/projectSub'
export default {
  name: 'UpLoadModel',
  props: {
    childParams: {
      type: Object,
      default() {
        return {
          title: '上传模型',
          type: Object,
          projectCode: '',
          subNo: ''
        }
      }
    }
  },
  data() {
    this.setLoading = setLoading.bind(this)
    return {
      /* style1、style2样式切换*/
      style1: 'margin: -7px 40px 0 100px;padding: 0;font-size: 12px;white-space: pre-wrap;',
      style2: 'margin: 18px 40px 0 100px;padding: 0;font-size: 12px;white-space: pre-wrap;',
      msg: `
模型更新时，待上传的文件名要与平台中的文件名保持一致。  `, // 提示信息
      exampleMsg: `工程号-子项号-专业     `, // 提示信息
      example: `00000001-00-GI`, // 提示信息
      isLoading: false, // 按钮加载状态
      dialogVisible: false, // 模型显示
      rules: {}, // 检验
      /* rules1、rules2检验变量*/
      rules1: {
        file: [
          { required: true, message: '请选择文件' }
        ],
        rootName: [
          { min: 0, max: 100, message: '长度在 0 到 100 个字符', trigger: 'blur' }
        ]
      },
      rules2: {
        file: [
          { required: true, message: '请选择文件' }
        ],
        rootName: [
          { required: true, message: '请输入主文件名', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ]
      },
      formData: {
        file: '', // 上传的文件名
        rootName: '', // 主文件名
        projectCode: this.childParams.projectCode, // 项目编号
        subNo: this.childParams.subNo// 子项编号
      },
      fileList: [], // 上传的文件
      formFormat: 'rvt/rte/skp/ifc/rfa/nwd/nwc/nwf/wrl/vue/stl/ply/blend/ms3d/3dm/bmv/fbx/dae/3ds/obj/rvm/rvmp/zip/stp/step/igs/iges/xml/osgbzip', // 上传文件格式
      format: '', // 上传的文件格式，用于切换校验
      flag: false, // 主文件名是否显示
      style: '' // 样式
    }
  },
  watch: {
    /* 文件格式为zip，增加rootName校验*/
    format: {
      handler: function(val) {
        if (val === 'zip') {
          this.rules = this.rules2
          this.flag = true
        } else {
          this.rules = this.rules1
          this.flag = false
          this.style = this.style1
        }
      },
      immediate: true,
      deep: true
    },
    childParams: {
      handler: function(val) {
        this.formData.projectCode = val.projectCode
        this.formData.subNo = val.subNo
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    /* 切换样式*/
    changeStye() {
      if (this.formData.rootName !== '') {
        this.style = this.style1
      } else {
        this.style = this.style2
      }
    },
    /* 点击按钮触发上传前校验*/
    submitFile() {
      this.changeStye()
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.setLoading(true)
          this.$refs.upload.submit()
        } else {
          return false
        }
      })
    },
    /* 关闭弹窗*/
    dialogClose() {
      this.$emit('dialogClose', false)
    },
    /* 上传*/
    uploadFile(param) {
      const uploadFormData = new FormData()
      uploadFormData.append('projectCode', this.formData.projectCode)
      uploadFormData.append('subNo', this.formData.subNo)
      uploadFormData.append('file', param.file)
      uploadFormData.append('rootName', this.formData.rootName)
      upLoadModel(uploadFormData).then((data) => {
        if (data.code === 0) {
          this.fileList = []
          this.formData.file = ''
          this.formData.rootName = ''
          this.format = ''
          this.dialogClose()
        }
        this.setLoading(false)
      }).catch(() => {
        this.setLoading(false)
      })
    },
    /* 文件格式*/
    acceptFile(e) {
      const allowHook = {
        files: '.rvt,.rte,.skp,.ifc,.rfa,.nwd,.nwc,.nwf,.wrl,.vue,.stl,.ply,.blend,.ms3d,.3dm,.bmv,.fbx,.dae,.3ds,.obj,.rvm,.rvmp,.zip,.stp,.step,.igs,.iges,.xml,.osgbzip'
      }
      if (e) {
        return allowHook[e]
      }
      let srt = null
      for (const k in allowHook) {
        srt += allowHook[k]
      }
      return srt
    },
    /* 允许上传文件个数验证*/
    formHandleExceed(files, fileList) {
      this.$message.warning(`当前只能选择一个文件，您本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件。`)
    },
    /* 选择上传列表中文件*/
    formHandleChange(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      this.format = testmsg
      this.formData.file = file.name
      this.$refs.ruleForm.validateField('file')
    },
    /* 移除上传列表中文件*/
    formHandleRemove() {
      this.formData.file = ''
      this.format = ''
      this.$refs.ruleForm.validateField('file')
    },
    /* 开始上传前验证*/
    beforeUploadForm(file) {
      // 验证文件类型
      if (file.name) {
        var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1).toLowerCase()
        const arr = ['rvt', 'rte', 'skp', 'ifc', 'rfa', 'nwd', 'nwc', 'nwf', 'wrl', 'vue', 'stl', 'ply', 'blend', 'ms3d', '3dm', 'bmv', 'fbx', 'dae', '3ds', 'obj', 'rvm', 'rvmp', 'zip', 'stp', 'step', 'igs', 'iges', 'xml', 'osgbzip']
        const extension = arr.indexOf(testmsg) !== -1
        if (!extension) {
          this.$message({
            message: `上传文件只能是 ${this.formFormat} 格式！`,
            type: 'warning'
          })
          this.setLoading(false)
        }
        return extension
      }
      /* 验证文件大小*/
      if (file.size / 1024 / 1024 > this.formMaxSize) {
        this.$message({
          message: `大小不能超过 ${this.formMaxSize} M！`,
          type: 'warning'
        })
        this.setLoading(false)
        return false
      }
    }
  }

}

</script>

<style lang="scss" scoped>
.new-built-container {
  height: 100%;
}
.bodys {
  margin: 0;
  padding: 0;
  border: none;
  height: 100%;
  .content-form {
    >>> .el-upload__tip{
      margin-right: 50px;
    }
    padding-left: 20px;
    overflow-y: auto;
    box-sizing: border-box;
    >>> .el-form-item__error{
      width: 200px!important;
    }
  }
  .content-footer {
    position: relative;
    height: 70px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: right;
    align-items: center;
    align-content: center;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    border: none;
  }
}
</style>
<style lang="scss">
.abow_dialog[view-crash-manage] {
  .el-dialog {
    line-height: 24px;
    font-style: revert;
    width: 520px;
    max-height: 90%;
    height: auto;
    padding: 0;
    .el-dialog__title{
      font-size: 18px;
      color: var(--brother-common-tips-text-color);
    }
    .el-dialog__header{
      padding: 10px;
    }
    .el-dialog__body{
      padding: 20px 10px 0 10px;
    }
    .el-input{
      width: 180px;
    }
  }
}
</style>

